---
title: Buttons
description: Button components created with Tailwind CSS
emoji: 👆
wrapper: h-[200px]
container: p-6 flex flex-wrap justify-center gap-4
terms:
  - button
  - action
  - cta
components:
  - { title: 'Base, solid and bordered' }
  - { title: 'Base with icon, solid and bordered' }
  - { title: 'Gradient border, rounded and pill' }
  - { title: 'Icon, solid and bordered' }
  - { title: 'Drop shadow, hide shadow and show shadow on hover' }
  - { title: 'Base with icon on hover, solid, bordered and icon left/right' }
  - { title: 'Base with shadow and expand on hover, solid and bordered' }
  - { title: 'Base with rotate and expand on hover, solid, outline and rotate left/right' }
  - { title: 'Artistic with offset background, background moves in and out on hover' }
  - { title: 'Highlighted border which expands on hover, left, right, bottom and left' }
  - { title: 'Large with emphasized icon, solid and bordered' }
  - { title: 'Reveal hidden static border on hover, solid and bordered' }
---

# Button Components

<p>{frontmatter.description}</p>

<CollectionList componentsData={componentsData} />
